@import "../styles/variable.scss";

// 基本样式
.yui-button {
  font-weight: $btn-font-weight;
  border: none;

  @include button-size(
    $btn-padding-x,
    $btn-padding-y,
    $btn-font-size,
    $btn-radius
  );

  background-image: none;
  cursor: pointer;

  // focus 公用
  &:focus {
    outline: none;
  }

  // 默认
  &.yui-button-default {
    color: #575757;
    background: #f7f7fa;
    &:hover {
      background: #e5e5ea;
    }
    &:active {
      background: #d9d9d9;
    }
    &.yui-button-disabled {
      background: #f7f7fa;
      color: #c5c6c7;
      cursor: not-allowed;
    }
  }

  // primary
  &.yui-button-primary {
    color: #fff;
    background: #74bb9d;
    &:hover {
      background: #5db48f;
    }
    &:active {
      background: #5db48f;
    }
    &.yui-button-disabled {
      background: #79c7a6;
      cursor: not-allowed;
    }
  }

  // danger
  &.yui-button-danger {
    color: #fff;
    background: #ff7875;
    &:hover {
      background: #e4383a;
    }
    &:active {
      background: #d42926;
    }
    &.yui-button-disabled {
      background: #eeb4b3;
      cursor: not-allowed;
    }
  }

  // link
  &.yui-button-link {
    color: #1675e0;
    background: none;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:active {
      text-decoration: none;
      color: #004299;
    }
    &.yui-button-disabled {
      color: #1675e0;
      opacity: 0.3;
      pointer-events: none;
    }
  }

  // block
  &.yui-button-block {
    width: 100%;
    border-radius: 0;
  }
}
.yui-button-lg {
  @include button-size(
    $btn-padding-x-lg,
    $btn-padding-y-lg,
    $btn-font-size-lg,
    $btn-radius
  );
}
.yui-button-sm {
  @include button-size(
    $btn-padding-x-sm,
    $btn-padding-y-sm,
    $btn-font-size-sm,
    $btn-radius
  );
}
.yui-button-xs {
  @include button-size(
    $btn-padding-x-xs,
    $btn-padding-y-xs,
    $btn-font-size-xs,
    $btn-radius
  );
}
